import React, { Component } from 'react';
import {Button, Checkbox, message, Form, Input, Select, Switch} from 'antd';
import { messages } from "share/common";
import PDService from 'containers/enterprise-manage/person-manage/person-detail/person-detail.service';
const FormItem = Form.Item;
import {connect} from 'react-redux';

class NewAlipayCard extends Component {

  state = {
    loading: false,
    card: {},//当前编辑或新增的银行卡
    cardTypeList: [],//银行卡类型的数组
    showListSelector: false,
  };

  componentDidMount() {
    const { card, cardTypeList } = this.props.params;
    this.setState({ card, cardTypeList })
  }

  //去添加银行卡
  addCard = (e) => {
    let {card} = this.state;
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        if (values.bankAccountNo.match(/[^A-Za-z0-9_@\.\*]/)) {
          message.error(messages('basic-5.key387')/*支付宝账户只允许输入 字母 数字 _  @ .*/);
          return
        }
        Object.assign(card, values);
        this.createUpdateCard(card);
      }
    })
  };
  cancelCard = () => {
    // 在这里重置一下，主要是为了清除模态框之前的状态，
    // 比如有校验字段，当取消再次弹窗的时候，校验提示还会显示出来
    this.props.close();
    this.props.form.resetFields();
  };
  createUpdateCard = (card) => {
    this.setState({
      loading: true,
    });
    card.sourceType = "ALIPAY_LOGON_ID";
    card.bankName = "支付宝";//这是传给后端的字段，不要加下划线跑多语言
    if (card.contactBankAccountOID) {
      PDService.updateBankCard(card)
        .then((res) => {
          this.setState({
            loading: false,
          });
          this.props.close();
        })
        .catch((err) => {
          this.setState({
            loading: false,
          })
        })
    } else {
      PDService.creatBankCard(card)
        .then((res) => {
          //当新增了卡片需要传到父组件，重新刷新组件
          this.setState({
            loading: false,
          });
          this.props.close();
        })
        .catch((err) => {
          this.setState({
            loading: false,
          })
        })
    }

  };

  render() {
    const { loading } = this.state;
    const { card, cardTypeList } = this.props.params;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span:8 },
      wrapperCol: { span:16 }
    };
    let {company, user} = this.props,
      bring = company.employeeNameReal,
      disabled = company.employeeNameReal && company.nameFollowType === 'followedAndUnmodified';
    return (
      <div>
        <Form className="new-form">
          {/*状态*/}
          <FormItem {...formItemLayout}
                    label={messages('common.column.status')/*状态*/} colon={true}>
            {getFieldDecorator('enable', {
              initialValue: card.enable,
              valuePropName: 'checked',
            })(
              <Switch/>
            )}
          </FormItem>
          <FormItem {...formItemLayout}
                    label={messages('basic-5.key388')/*设为默认*/}
          >
            {getFieldDecorator('isPrimary', {
              initialValue: card.isPrimary || false,
              valuePropName: 'checked',
            })(
              <Checkbox>
                {messages('basic-5.key389')/* 是（只能有一个默认)*/}
              </Checkbox>
            )}
          </FormItem>
          <div className="standard-divider-title">{messages('basic-5.key176')/*基础信息*/}</div>
          <FormItem {...formItemLayout}
                    label={messages('basic-5.key390')/*支付宝账户*/} colon={true}>
            {getFieldDecorator('bankAccountNo', {
              initialValue: card.bankAccountNo,
              rules: [
                {
                  required: true,
                  message: messages('common.please.input')/*请输入*/
                },
                {
                  max: 64,
                  message: messages('common.max.characters.length',{arg1: 64})/*最多输入{arg1}个字符*/
                },
              ],
            })(
              <Input placeholder={messages('common.please.input')/*请输入*/} disabled={!!card.id }/>
            )}
          </FormItem>
          <FormItem {...formItemLayout}
                    label={messages('basic-5.key391')/*账号持有人姓名*/} colon={true}>
            {getFieldDecorator('bankAccountName', {
              initialValue: card.id ? card.bankAccountName : (bring ? (card.presetName || user.fullName) : ""),
              rules: [{
                required: true,
                message: messages('common.please.input')/*请输入*/
              },
                {
                  max: 256,
                  message: messages('common.max.characters.length',{arg1: 256})/*最多输入{arg1}个字符*/
                }
              ],
            })(
              <Input placeholder={messages('common.please.input')/*请输入*/} disabled={disabled}/>
            )}
          </FormItem>
          <FormItem {...formItemLayout}
                    label={messages('basic-5.key392')/*支付宝UID*/} colon={true}>
            {getFieldDecorator('uid', {
              initialValue: card.uid,
              rules: [{
                max: 32,
                message: messages('common.max.characters.length',{arg1: 32})/*最多输入{arg1}个字符*/
              }],
            })(
              <Input placeholder={messages('common.please.input')/*请输入*/}/>
            )}
          </FormItem>
          <div className="footer-operate" style={{backgroundColor:'#ffffff',left:'0px'}}>
            <Button type="primary" onClick={this.addCard}  loading={loading}>
              {messages('common.save')/*保存*/}
            </Button>
            &nbsp;&nbsp;&nbsp;
            <Button onClick={this.cancelCard}>
              {messages('common.cancel')/*取消*/}
            </Button>
          </div>
        </Form>
      </div>
    )
  }

}

function mapStateToProps(state) {
  return {
    company: state.login.company,
    user: state.login.user,
  }
}
const WrappedNewAlipayCard = Form.create()(NewAlipayCard);
export default connect(mapStateToProps)(WrappedNewAlipayCard);
